<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-imgUrl="{scope}">
				<img class="image" :src="scope.row.imgUrl" @click="showPreview(scope.row.imgUrl)" alt />
			</template>
			<template #table-column-status="{scope}">
				<el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
				<el-tag v-if="scope.row.status == 0" type="info">禁用</el-tag>
			</template>
		</cl-crud>

		<!--查看大图-->
		<el-dialog title="大图预览" :visible.sync="previewVisible" width="20%" class="preview-dialog">
			<img class="img-preview" :src="previewImg" alt />
		</el-dialog>
	</div>
</template>
 
<script>
import fileList from './components/feilList';
export default {
	name: 'share-poster',
	data() {
		return {
			crud: null,
			previewVisible: false,
			previewImg: null
		};
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			let self = this;
			ctx.service(this.$service.FAQMenagement.sharePoster)
				.set('dict', {
					label: {
						add: '添加海报',
						delete: '删除',
						edit: '编辑'
					}
				})
				.set('table', {
					columns: [
						{
							label: '#',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '图片',
							prop: 'imgUrl',
							align: 'center',
							'min-width': 150
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '更新时间',
							prop: 'updateTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						}
					],

					op: {
						layout: ['edit', 'slot-delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '90px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							label: '标题',
							prop: 'content',
							span: 20,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入标题'
								}
							},
							rules: {
								required: false,
								message: '请输入标题',
								default: '邀请好友分享海报'
							}
						},
						{
							prop: 'imgUrl',
							label: '上传图片',
							component: fileList
						},
						{
							hidden: false,
							label: '状态',
							prop: 'status',
							value: 0,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '否',
										value: 0
									},
									{
										label: '是',
										value: 1
									}
								]
							},
							rules: {
								required: true,
								message: '状态不能为空'
							}
						}
					]
				})
				.on('refresh', async (params, { next }) => {
					if (params.status === ' ') {
						delete params.status;
					}
					await next(params);
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'query', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh({
				order: 'asc',
				sort: 'level'
			});
		},
		showPreview(item) {
			this.previewVisible = true;
			this.previewImg = item;
		}
	}
};
</script>

<style lang="scss" scoped>
.image {
	width: 50px;
}
.preview-dialog {
	@include flexBox(center);
	.img-preview {
		width: 100%;
	}
}
</style>